<template>
  <div>
    <!-- 顶部组件 -->
    <!-- log+搜索 -->
    <!-- 内容 -->
    <div class="search">
      <div class="main">
        <!-- 面包屑 -->
        <div class="bread">
          <ul class="sui-breadcrumb">
            <li><a href="##">全部结果 ></a></li>
          </ul>
          <ul class="sui-tag">
            <li class="with-x">JOROAN <i @click="removeCategoryName">x</i></li>
            <li class="with-x">服饰 <i @click="removekeyword">x</i></li>
            <li class="with-x">手机 <i @click="removeTrademark">x</i></li>
            <li class="with-x">128G <i @click="removeProp(index)">x</i></li>
          </ul>
        </div>

        <!-- 属性列表 -->
        <SearchSelector
          @searchForTrademark1="searchForTrademark1"
          @searchForProp="searchForProp"
        ></SearchSelector>
        <!-- 排序 -->
        <div class="sui-navbar">
          <div class="filter">
            <ul class="ul">
              <li><a href="javaScript:;">综合</a></li>
              <li><a href="javaScript:;">价格</a></li>
              <li><a href="javaScript:;">折扣</a></li>
              <li><a href="javaScript:;">销量</a></li>
              <input class="input active" type="text" placeholder="¥" />
              <p class="p">-</p>
              <input class="input" type="text" placeholder="¥" />
            </ul>
          </div>
        </div>
        <!-- 商品列表 -->
        <div class="goods-list">
          <ul class="goods">
            <li v-for="goods in goodsList" :key="goods.id">
              <!--  -->
              <div class="list-wrap">
                <!-- img -->
                <div class="list-img">
                  <a href="javaScript:;">
                    <img :src="goods.defaultImg" alt="" />
                  </a>
                </div>
                <!-- 介绍 -->
                <div class="pricce">
                  <div class="pricceitem">
                    <div class="c-goods-item">
                      <span class="c-goods">券后价</span>
                    </div>
                    <div class="price">
                      <em>¥</em>
                      <p>{{ goods.price }}</p>
                    </div>
                  </div>
                  <div class="goodsName">{{ goods.title }}</div>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <!-- 分页器 -->
        <!--pagerCount连续页数,一般都是奇数-->
        <!--total页面总数-->
        <!--pageSize当前页面数据数量-->
        <!--currentPageNo第几页的数据-->
        <Pagination
        class="Pagination"
          @changPageNo="changPageNo"
          :pagerCount="5"
          :total="total"
          :pageSize="searchParams.pageSize"
          :currentPageNo="searchParams.pageNo"
        ></Pagination>
        <!-- 底部 -->
      </div>
    </div>
  </div>
</template>

<script>
import SearchSelector from "./SearchSelector/SearchSelector";
import { mapGetters } from "vuex";
export default {
  name: "Search",
  components: {
    SearchSelector,
  },
  data() {
    return {
      searchParams: {
        category1Id: "",
        category2Id: "",
        category3Id: "61",
        categoryName: "手机",
        keyword: "小米",
        trademark: "",
        props: [],

        // 搜索条件当中的默认参数
        order: "1:desc", //控制默认的排序规则
        pageNo: 1, //控制获取第几页的数据
        pageSize: 1, //控制每页多少个数据
      },
    };
  },
  beforeMount() {
    this.handlerSearchParams();
  },
  mounted() {
    this.getGoodsListInfo();
  },
  methods: {
    getGoodsListInfo() {
      this.$store.dispatch("getGoodsListInfo", this.searchParams);
    },

    // 封装searchParams
    handlerSearchParams() {
      // let {category1Id, category2Id, category3Id, categoryName} = this.$route.query
      // let {keyword} = this.$route.params;
      let { category1Id, category2Id, category3Id, categoryName, keyword } =
        this.searchParams;
      let searchParams = {
        ...this.searchParams,
        category1Id,
        category2Id,
        category3Id,
        categoryName,
        keyword,
      };
      Object.keys(searchParams).forEach((item) => {
        if (searchParams[item] === "") {
          delete searchParams[item];
        }
      });
      this.searchParams = searchParams;
    },
    // 品牌跳转
    searchForTrademark1(tarde){
      console.log(111);
      this.searchParams.keyword = `${tarde.tmId}:${tarde.tmName}`
      // this.getGoodsListInfo();
      console.log(this.searchParams.keyword);
    },
    // 平台属性跳转
    // searchForProp',attr,attrvalue
    searchForProp(attr,attrvalue){
      let prop = `${attr.attrId}:${attrvalue}:${attr.attrName}`
      let isRepeat = this.searchParams.props.some((item) =>{
        return item === prop
      })
      if(isRepeat){
        return
      }
      this.searchParams.props.push(prop)
      this.searchParams.pageNo = 1
      this.getGoodsListInfo()
    },

    // 删除面包屑
    removeCategoryName() {},
    removekeyword() {},
    removeTrademark() {},
    removeProp(index) {},
    // 点击 品牌跳转
    searchForTrademark() {},
    // 点击平台属性跳转
    searchForProp() {},

    // 分页器切换
    changPageNo(page) {
      this.searchParams.pageNo = page;
      this.getGoodsListInfo()
    },
    // 详情
    todetail(){
      this.$router.push('')
    }
  },
  computed: {
    ...mapGetters(["goodsList", "total"]),
  },
};
</script>

<style lang="less" scoped>
.search {
  widows: 100%;
  .main {
    width: 1200px;
    margin: auto;
    .bread {
      width: 100%;
      display: flex;
      height: 40px;
      line-height: 40px;
      .sui-breadcrumb {
        padding: 0 15px;
        font-weight: bold;
      }
      .sui-tag {
        display: flex;
        .with-x {
          display: block;
          margin-top: 10px;
          margin: 10px 5px;
          padding: 0 5px;
          height: 20px;
          line-height: 20px;
          border: 1px solid #ccc;
          i {
            margin-left: 10px;
            float: right;
            color: #ccc;
          }
        }
      }
    }
    .sui-navbar {
      margin-top: 30px;
      height: 45px;
      background-color: #f5f5f5;
      line-height: 45px;
      .filter {
        .ul {
          display: flex;
          li {
            display: block;
            width: 50px;
            height: 45px;
            line-height: 45px;
            margin-left: -1px;
            text-align: center;
            border: 1px solid #e5e5e5;
          }
          .input {
            box-sizing: border-box;
            margin-top: 10px;
            width: 50px;
            height: 20px;
            color: #ccc;
            padding: 2px 5px;
            &.active {
              margin-left: 10px;
            }
          }
          .p {
            margin: 0 5px;
          }
        }
      }
    }
    .goods-list {
      margin-top: 30px;
      ::after {
        display: block;
        content: "";
        // width: 215px;
        flex: 1;
      }
      .goods {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;

        li {
          margin: 0 10px;
          margin-bottom: 15px;
          width: 18%;
          height: 325px;
          margin-right: 20px;
          border: 1px solid #ccc;
          &:hover {
            border: 1px solid #f47920;
          }
          .list-wrap {
            .list-img {
              img {
                width: 100%;
                height: 235px;
              }
            }
            .pricce {
              padding: 10px;
              .pricceitem {
                display: flex;
                .c-goods-item {
                  width: 40px;
                  height: 20px;
                  line-height: 20px;
                  text-align: center;
                  color: white;
                  font-size: 8px;
                  border-radius: 10px;
                  background-color: #f47920;
                }
                .price {
                  line-height: 20px;
                  display: flex;
                  em {
                    width: 10px;
                    margin: 0 10px;
                    font-size: 18px;
                    font-weight: bold;
                  }
                  p {
                    font-size: 18px;
                  }
                }
              }
              .goodsName {
                margin-top: 20px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2; /** 多行文本溢出...*/
                overflow: hidden;
              }
            }
          }
        }
      }
    }
  }
  .Pagination{
    margin: 0 300px;
  }
}
</style>
